<template>
	<div class="app-edit">
		<div class="h-panel">
			<div class="h-panel-bar">
				<span class="h-panel-title">编辑订单</span>
				<span class="h-panel-right">
					<a @click="close"><i class="icon guanbi"></i></a>
				</span>
			</div>
			<Tabs :datas="tabs" v-model="selected"></Tabs>
			<div class="h-panel-body" v-if="selected == 0">
				<Form class="setting-form" mode="twocolumn">
					<FormItem label="订单号">
						<input type="text" readonly="true" :value="data.number" placeholder="提交后自动生成"/>
					</FormItem>
					<FormItem label="用户">
						<input v-if="id>0" type="text" :value="data.user.phone" readonly/>
						<CategoryNet v-else v-model="data.user_id" url="user" :tables="[{title:'电话',field:'phone'},{title:'昵称',field:'nickname'}]" placeholder="点击选择用户"/></CategoryNet>
					</FormItem>
					<FormItem label="总价">
						<input type="text" readonly="true" :value="data.money" placeholder="添加产品后自动计算"/>
					</FormItem>
					<FormItem label="改价">
						<input type="text" v-model="data.discount" placeholder="加价:100;减价:-100"/>
					</FormItem>
					<FormItem label="状态">
						<Radio v-model="data.status" :datas="$global.config.orderStatus"></Radio>
					</FormItem>
					<FormItem label="时间">
						<DatePicker :disabled="true" :value="$global.getDateTime(data.create_time)" type="datetime" placeholder="提交后自动生成"></DatePicker>
					</FormItem>
					<FormItem label="备注" single>
						<textarea v-model="data.mark"></textarea>
					</FormItem>
				</Form>
			</div>
			<div class="h-panel-body" v-if="selected == 1">
				<div class="h-panel-right" style="margin-bottom: 10px;display: flex;justify-content:flex-end;">
					<div class="addproductdiv">添加产品</div>
					<CategoryNet url="product" placeholder="添加产品" class="addproduct" :tables="[{title:'名称',field:'name'},{title:'单价',field:'price'},{title:'类目',field:'cate_id'}]" @confirm="addProduct"/></CategoryNet>
				</div>
				<Table :datas="data.order_product" :border="true">
					<TableItem :width="80" prop="product_id" align="center" title="产品编号"></TableItem>
					<TableItem :width="100" align="center" title="产品">
						<template slot-scope="{data}">
							{{data.name}}<br>
							<DropdownCustom v-if="data.spec_data && data.spec_data.length > 1" ref="dropdown">
								<span v-if="data.spec_index == -1" style="padding: 1px 2px;font-size: 10px;" class="h-tag h-tag-bg-red">请选择产品规格</span>
								<span v-else>
									<span style="padding: 1px 2px;font-size: 10px;" v-for="(item, index) in data.spec_data[data.spec_index].attr" :class="'h-tag '+ $global.tagColor[index%4]">{{item}}</span>
								</span>
								<div class="h-dropdown-inner">
									<div class="h-dropdowncustom-group">
										<ul class="h-dropdownmenu-default-dropdown h-dropdownmenu-group">
											<li class="h-dropdownmenu-item" v-for="(item, index) in data.spec_data">
												<span @click="selectSpec(data,index)">{{item.attr}}</span>
											</li>
										</ul>
									</div>
								</div>
							</DropdownCustom>
						</template>
					</TableItem>
					<TableItem :width="100" align="center" title="主图">
						<template slot-scope="{data}">
							<img :src="data.pic" class="productPic" @click="$ImagePreview(data.pic)" @error="$imageError">
						</template>
					</TableItem>
					<TableItem :width="100" align="center" title="小计">
						<template slot-scope="{data}">
							<div>￥{{data.price}}</div>
							<div style="color: #999;line-height: 25px;">x <input type="number" min="0" max="10000" v-model="data.num"/></div>
						</template>
					</TableItem>
					<TableItem :width="300" align="center" title="表单">
						<template slot-scope="{data}">
							<Form class="order-form" mode="single">
								<Render v-for="(item,index) in data.form" :key="index" :conf="item || {}"></Render>
							</Form>
						</template>
					</TableItem>
				</Table>
			</div>
			<Form class="setting-form" mode="twocolumn">
				<FormItem single>
					<Button color="primary" @click="submit">提交</Button>
					<Button @click="close">取消</Button>
				</FormItem>
			</Form>
		</div>
	</div>
</template>

<script>
import {Render} from '@/components/custom-form'
export default {
	components: {
		Render
	},
	props: {
		id: Number
	},
	data() {
		return {
			tabs: {
				0:'基本信息',
				1:'产品信息'
			},
			selected : 0,
			data: {user:{},order_product:[]}
		}
	},
	mounted() {
		if(this.id > 0){
			this.getData()
		}
	},
	methods: {
		selectSpec (data,index){
			this.$set(data,'spec_index',index)
			this.$set(data,'price',data.spec_data[index].price)
			this.$refs.dropdown.hide()
		},
		async getData() {
			this.loading = true
			this.data = await this.$api('GET','order/'+this.id)
			this.loading = false
		},
		addProduct (e){
			let order_product = {
				product_id : e.id,
				name : e.name,
				pic : e.pic,
				price : e.price,
				num : 1,
				form : this.$global.getArrayById(this.$global.config.forms,e.order_form_id,'data'),
				spec_index : (e.spec_data && e.spec_data.length) > 1 ? -1 : 0,
				spec_data : e.spec_data
			}
			this.data.order_product.push(order_product)
		},
		async submit (){
			let res = ''
			this.loading = true
			if(this.id > 0){
				res = await this.$api('PUT','order/'+this.id,this.data)
			}else{
				res = await this.$api('POST','order',this.data)
			}
			this.loading = false
			if(res){
				this.close()
			}
		},
		close (){
			this.$emit('close')
		}
	}
};
</script>

<style lang="less">
	.productPic {
		height: 50px;
		max-width: 120px;
	}
	.order-form {
		.h-form-item{
			padding: 3px !important;
		}
	}
	.addproductdiv{
		width: 75px;
		position:absolute;
		cursor: pointer;
		pointer-events: none;
		background: @primary-color;
		color: #ffffff;
		text-align: center;
		line-height: 30px;
		height: 30px;
		border-radius: 3px;
	}
	.addproduct {
		width: 75px;
		.showButton{
			cursor: pointer;
			background: @primary-color;
			span{
				color: #ffffff !important;
			}
		}
	}
</style>